<template>
  <OpenMap />
  <MapControl />
  <DirectoryTree v-if="isShow" />
  <div class="header">
    <div class="logo-box">
      <img src="../../assets/logo.png" alt="" />
      <h1>光谷智慧交通系统</h1>
    </div>
    <div class="nav">
      <div class="nav-btn">
        <!-- 报告路况 -->
        <RealTimeTraffic />
      </div>
      <div class="nav-btn">
        <!-- 查看公告 -->
        <ViewNotice />
      </div>
      <div class="nav-btn" v-if="type==='common'">
        <!-- 报告路况 -->
        <ReportRoadCondition />
      </div>
      <div class="nav-btn" v-if="isShow">
        <!-- 视频监控 -->
        <VideoSurveillance />
      </div>
      <div class="nav-btn" v-if="isShow">
        <AddEvent />
      </div>
      <div class="nav-btn" v-if="isShow">
        <!-- 事件查询 -->
        <EventQuery />
      </div>
      <div class="nav-btn" v-if="isShow">
        <!-- 事件更新 -->
        <EventUpdate />
      </div>
      <div class="nav-btn" v-if="isShow">
        <!-- 发布公告 -->
        <ReleaseNotice />
      </div>
      <div class="nav-btn" v-if="isShow">
        <TrafficInformation />
      </div>
      <div class="nav-btn">
        <!-- 工具箱 -->
        <ToolBox />
      </div>
    </div>
    <!-- input框 -->
    <InputQuery class="input-query" />
    <div class="userinfo">
      <UseInformation />
    </div>
  </div>
</template>

<script setup>
import OpenMap from './components/OpenMap.vue';
import ToolBox from './components/Tool/ToolBox.vue';
import MapControl from './components/MapControl.vue';
import RealTimeTraffic from './components/RealTimeTraffic.vue';
import ReportRoadCondition from './components/ReportRoadCondition.vue';
import ReleaseNotice from './components/ReleaseNotice.vue';
import ViewNotice from './components/ViewNotice.vue';
import UseInformation from './components/UseInformation.vue';
import EventQuery from './components/EventQuery.vue';
import TrafficInformation from './components/TrafficInformation.vue';
import AddEvent from './components/AddEvent/AddEvent.vue';
import DirectoryTree from './components/DirectoryTree.vue';
import InputQuery from './components/InputQuery/InputQuery.vue';
import VideoSurveillance from './components/VideoSurveillance.vue';
import EventUpdate from './components/EventUpdate/EventUpdate.vue';

const map = ref(null);
const type = localStorage.getItem('type');
const isShow = ref(false);
if (type === 'traffic' || type === 'admin') {
  isShow.value = true;
}

onMounted(() => {
  map.value = inject('$map');
});
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100vw;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1000;

  .logo-box {
    display: flex;
    align-items: center;
    margin-right: 10px;

    img {
      height: 34px;
    }

    h1 {
      font-size: 20px;
    }
  }

  .nav {
    display: flex;
    height: 100%;

    .nav-btn {
      padding: 0 10px;
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: #c5c5c5;
      }
    }
  }
  
  .input-query {
    width: 350px;
    margin-left: auto;
    margin-right: 30px;
  }

  .userinfo {
    margin-right: 10px;
    color: #8b8b8b;
    cursor: pointer;
  }
}
</style>
